<template>
    <div class="xinnengyuan">
        <ul class="top">
            <li>
                <img src="../../img/1.jpg" alt="">
                <p>
                    销量排行
                </p>
            </li>

            <li>
                <img src="../../img/2.jpg" alt="">
                <p>上市新车</p>
            </li>

            <li>
                <img src="../../img/3.jpg" alt="">
                <p>续航排行</p>
            </li>

            <li>
                <img src="../../img/4.jpg" alt="">
                <p>易车充电</p>
            </li>

            <li>
                <img src="../../img/5.jpg" alt="">
                <p>购车计算器</p>
            </li>
        </ul>

        <div class="seecar">
            <div class="see_1">看过的车</div>
            <ul class="car">
                <li>
                    <img src="../../img/3.jpg" alt="">
                    <div>宋PLUS新能源</div>
                    <div>15.48-21.88</div>
                </li>

                <li>
                    <img src="../../img/宝马3系.jpg" alt="">
                    <div>宋PLUS新能源</div>
                    <div>15.48-21.88</div>
                </li>

                <li>
                    <img src="../../img/宝马3系.jpg" alt="">
                    <div>宋PLUS新能源</div>
                    <div>15.48-21.88</div>
                </li>
            </ul>
        </div>

        <div class="top_2">
            <div class="top_3">
                <div>销量排行</div>
                <div>更多 ></div>
            </div>

            <ul class="baojia">
                <li>
                    <img src="../../img/6.jpg" alt="">
                    <div>宋PLUS新能源</div>
                    <div>查看报价</div>
                </li>

                <li>
                    <img src="../../img/7.jpg" alt="">
                    <div>111111</div>
                    <div>查看报价</div>
                </li>

                <li>
                    <img src="../../img/8.jpg" alt="">
                    <div>111111</div>
                    <div>查看报价</div>
                </li>

                <li>
                    <img src="../../img/9.jpg" alt="">
                    <div>111111</div>
                    <div>查看报价</div>
                </li>

                <li>
                    <img src="../../img/9.jpg" alt="">
                    <div>111111</div>
                    <div>查看报价</div>
                </li>

                <li>
                    <img src="../../img/9.jpg" alt="">
                    <div>111111</div>
                    <div>查看报价</div>
                </li>

                <li>
                    <img src="../../img/9.jpg" alt="">
                    <div>111111</div>
                    <div>查看报价</div>
                </li>
            </ul>
        </div>

        <div class="zell">
            <div class="one">
                <h6>热门品牌</h6>
                <h6>品牌选车</h6>
                <h6>条件选车</h6>
            </div>
            <ul class="Names">
                <li>
                    <img src="../../img/比亚迪.jpg" alt="">
                    <div class="CarName">比亚迪</div>
                </li>

                <li>
                    <img src="../../img/特斯拉.jpg" alt="">
                    <div class="CarName">特斯拉</div>
                </li>

                <li>
                    <img src="../../img/大众.jpg" alt="">
                    <div class="CarName">大众</div>
                </li>



                <li>
                    <img src="../../img/比亚迪.jpg" alt="">
                    <div class="CarName">比亚迪</div>
                </li>

                <li>
                    <img src="../../img/蔚来.jpg" alt="">
                    <div class="CarName">蔚来</div>
                </li>
            </ul>
            <ul class="Names">
                <li>价格</li>
                <li>5万以下</li>
                <li>5-8万</li>
                <li>12-18万</li>
                <li>18万以上</li>
            </ul>
            <ul class="Names">
                <li>续航</li>
                <li>200-300</li>
                <li>300-400</li>
                <li>400-500</li>
                <li>500以上</li>
            </ul>
            <ul class="Names">
                <li>类别</li>
                <li>纯电动</li>
                <li>插电混动</li>
                <li>SUV</li>
                <li>自主品牌</li>
            </ul>
        </div>




    </div>
</template>

<script>
    export default {
        
    }
</script>

<style lang="scss" scoped>
.xinnengyuan{
    width: 100%;
    height: 100%;
    .top{
        // width: 100%;
        // height: 100px;
        display: flex;
        justify-content: space-around;
        text-align: center;
        margin-top: 20px;
        li{
            width: 120px;
            height: 100px;
            
            img{
                width: 50px;
                height: 50px;
            }
        }
    }

    .top_2{
        margin-top: 20px;
        .top_3{
            display: flex;
            justify-content: space-between;
            margin-left: 20px;
        }

    }

    .seecar{
        width: 100%;
            height: 100%;

            .see_1{
                margin-left: 20px;
            }
        .car{
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: space-evenly;
            text-align: center;
            li{
                width: 300px;
                height: 240px;
                margin-left: 20px;
                margin-top: 20px;
                padding-top: 20px;
                background-color: aliceblue;

                img{
                    width: 150px;
                    height: 150px;
                }
            }
        }
    }

    .baojia{
        width: 100%;
        height: 100%;
        display: flex;
        overflow: hidden;
        margin-top: 20px;
        justify-content: space-between;
        li{
            width: 150px;
            height: 230px;
            margin-left: 50px;
            background-color: bisque;
            img{
                width: 110px;
                height: 150px;
            }
        }
        
        
    }
    .zell{
        margin-top: 20px;
        .one{
            display: flex;
            h6{
                margin-left: 20px;
            }
        }

        .Names{
            margin-top: 20px;
            display: flex;
            justify-content: space-around;
            text-align: center;
            li{
                img{
                    width: 80px;
                    height: 70px;
                }
            }
        }
    }
}

</style>